$(function () {
    // 设置后续输入框离左侧的位置
    leftSize = $("#targetFirst").position().left-($(window).width()*0.025);
    function setTargetLeft(where){
        $(".target").each(function () {
            if(!$(this).hasClass("old")){
                $(this).css({
                    marginLeft:leftSize
                })
                $(this).addClass("old");
            }
        })
    }

    flag = 0;
    flaged = 0;
    // add按钮点击的函数1
    function add1(){
        $(".VarTable button").removeClass("btn-default").addClass("btn-success");
        flag = 1;
    }

    after = '<div class="form-group outside">\n' +
        '                                <div class="form-group">\n' +
        '                                    <input type="text" class="form-control target" placeholder="www.baidu.com" id="targetFirst">\n' +
        '                                </div>\n' +
        '                                <button type="submit" class="btn btn-default addVar">添加变量</button>\n' +
        '                        </div>'

    // 变量表中按钮的点击之后要执行的函数
    function VarsClick(where){
        if(flag == 1){
            $($("#step1").find(".addVar")[$("#step1").find(".addVar").length-1]).text($this.text());
            where.after(after);
            $(".VarTable button").removeClass("btn-success").addClass("btn-default");
            flag = 0;
            flaged =1;
        }else {
            return false
        }
    }


    // 把添加变量事件委托给body
    $(".steps").delegate(".addVar","click",function () {
        if(!$(this).siblings().children("input").val())
        {
            alert("添加变量前请保证前方输入框不为空");
            return false;
        }
        add1();
        where=$(this);
        // 开始监听变量表中按钮的点击事件
        $(".VarTable button").on("click",function () {
            $this = $(this);
            VarsClick(where);
            setTargetLeft(where);
        });
    });

    // 设置返回值框的高度
    function setReturnPalceHeight(){
        $(".returnPlace").css({
            height:$("textarea").height()
        })
    }

    // 定义新的标签页
    var index = 2;

    $(".steps").delegate(".next","click",function () {
        // 定义节点变量
        ulLi = '<li role="presentation" class=""><a href="#step'+String(index)+'" role="tab" id="step'+String(index)+'-tab" data-toggle="tab" aria-controls="step'+String(index)+'" aria-expanded="true">第'+String(index)+'步</a></li>';

        // 定义标签页的内容变量
        tabpanel = '<div role="tabpanel" class="tab-pane fade active in" id="step'+String(index)+'" aria-labelledby="step'+String(index)+'-tab">\n' +
            '                        <div class="form-group outside">\n' +
            '                                <div class="form-group">\n' +
            '                                    <label class="stepTitle">访问对象:&emsp;</label>\n' +
            '                                    <input type="text" class="form-control target old" placeholder="www.baidu.com" id="targetFirst">\n' +
            '                                </div>\n' +
            '                                <button type="submit" class="btn btn-default addVar">添加变量</button>\n' +
            '                        </div>\n' +
            '                        <div class="btns">\n' +
            '                            <button class="btn btn-primary action-btn">测试发送</button>\n' +
            '                            <button class="btn btn-primary action-btn">识别验证</button>\n' +
            '                            <button class="btn btn-primary action-btn">获取验证码</button>\n' +
            '                        </div>\n' +
            '                        <div class="form-group returnPlace">\n' +
            '                            <label class="stepTitle">返回值:&emsp;&emsp;</label>\n' +
            '                            <textarea cols="10" class="returnText" placeholder="返回值可能需要一段时间才能收到，请勿重复点击" id="returnValue"></textarea>\n' +
            '                    </div>\n' +
            '                        <div class="endBtns">\n' +
            '                            <button class="btn btn-primary action-btn next">下一步</button>\n' +
            '                            <button class="btn btn-primary action-btn finish">写完了</button>\n' +
            '                        </div>\n' +
            '                    </div>';

        // 获取标签的个数
        var liNum = $(".steps").children("ul").find("li").find("a").length;

        // 插入节点
        $(".steps").children("ul").find("li:last-child").after(ulLi);

        // 循环匹配，更改class，触发点击事件
        for(i=0;i<liNum;i++){
            if($($(".steps").children("ul").find("li").find("a")[i]).attr("aria-expanded")){
                $($(".steps").children("ul").find("li").find("a")[i]).attr("aria-expanded","false");
                $("#myTabContent").append(tabpanel);
                $($(".steps").children("ul").find("li").find("a")[liNum]).trigger("click");
                index = index + 1;
                // 设置返回值框的高度
                setReturnPalceHeight();
                break;
            }
        }
    });

    // 监视finish按钮的点击
    $(".steps").delegate(".finish","click",function () {
        alert("牛逼!!!");
    });

    setReturnPalceHeight();
    $(window).resize(function () {
        leftSize = $("#targetFirst").position().left-($(window).width()*0.025);
        if (flaged == 1){
            setTargetLeft();
        }
    })
})